function setFont() {
    let htmlWidth = document.querySelector('html').clientWidth
    if(htmlWidth < 1024) htmlWidth = 1024
    if(htmlWidth > 1920) htmlWidth = 1920
    let fontSize = htmlWidth / 80 + 'px'
    document.querySelector('html').style.fontSize = fontSize
}
setFont()
let myChart1, myChart2
window.onresize = function () {
    setFont()
    myChart1.resize() 
    myChart2.resize() 
}

let a = []
let b = []
let c = []
// 渲染表格
;(function () {
    $('.btn').on('click', function () {
            let uname = $('.username').val()
            let score = $('.score').val()
            let salary = $('.salary').val()
            a.push(uname)
            b.push(score)
            c.push(salary)
            let str
            if (uname !== '' && score !== ''&& salary !== '') {
                 str = `
                <tr>
                    <td>${uname}</td>
                    <td>${score}</td>
                    <td>${salary}</td>
                </tr>
            `
                $('tbody').append(str)
                $('input').val('')
                xian()
                zhu()
            }
        })  
})()

// 折线图
;function xian() {
myChart1 = echarts.init($('.line')[0])
let option = {
    grid: {
        left: '5%',
    },
    tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(255,255,255,0)' // 0% 处的颜色
                  }, {
                    offset: 0.5,
                    color: 'rgba(255,255,255,1)' // 100% 处的颜色
                  }, {
                    offset: 1,
                    color: 'rgba(255,255,255,0)' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              },
            },
          },
    xAxis: [{
        type: "category",
        boundaryGap: true,
        axisLabel: {
            fontSize:14,
            textStyle: {
                color: "#19a3df"
            }
        },
        axisLine: {
            lineStyle: {
                color: "#19a3df"
            }
        },
        splitLine: {
            show:false,
        },
        axisTick:{
            show:false
        },
        data: a
    }],
    yAxis: [
        {
            boundaryGap:false,
            type: "value",
            name: '评分',
            axisLabel: {
                fontSize:14,
                textStyle: {
                    color: "#19a3df"
                }
            },
           
            splitLine: {
                show: false,
            },
            axisLine: {
                show: true,
                lineStyle:{
                    color:"#19a3df"
                }
            },
            axisTick: {
                show: false
            }
        }
    ],
    series: [{
        name: "评分",
        type: "line",
        // smooth: true,
        // showSymbol: true,
        // symbolSize: 8,
        // zlevel: 3,
        itemStyle:{
            color:'#19a3df',
            borderColor:"#a3c8d8"
        },
        lineStyle: {
            normal: {
                width:6,
                color: "#19a3df",
            }
        },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [{
                            offset: 0,
                            color: "rgba(30,150,167,0)"
                        },
                        {
                            offset: 1,
                            color: "#19a3df"
                        }
                    ],
                    false
                ),
            }
        },
        data: b
    }]
};
myChart1.setOption(option)
}


// 柱状图
; function zhu() {
    myChart2 = echarts.init($('.bar')[0])
    let option = {
        grid: {
            left: '5%',
        },
        textStyle: {
            fontSize: 0,
        },
        color: ["#00FCFF","#FFDF1C","#5AB72C","#FF715A","#2F9BFF"],
        xAxis: {
           
            axisLabel: {
                color: "#19a3df",//X轴文字
                fontSize: 14,
                interval: 0
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color:  "#19a3df",
                },
                show: true
            },
            data: a , 
            type: "category"
        },
        yAxis: {
            type: 'value',
            name: '薪资',
            axisLabel: {
                color: "#19a3df",//Y轴文字
                fontSize: 14
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false,
                
            },
            axisLine: {
                lineStyle: {
                    color:  "#19a3df",
                },
                show: true
            },
        },
        series: [{
            data: c,
            type: "bar",
            barMaxWidth: "auto",
            barWidth: 30,
            itemStyle: {
                color: {
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    type: "linear",
                    global: false,
                    colorStops: [{
                        offset: 0,
                        color: "#00FCFF",
                    }, {
                        offset: 1,
                        color: "#0B1A39"
                    }]
                }
            },
        },],
        tooltip: {
            trigger: "axis",
            show: false
        }
    }
    myChart2.setOption(option)
 }
